﻿<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>

	<!-- Basic Page Needs
  ================================================== -->
	<meta charset="utf-8" />
	<title>Crunchy Responsive Creative Template</title>
	<meta name="description" content="" />
	<meta name="author" content="" />
	<!--[if lt IE 9]>
		<script src="http//html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<!-- Mobile Specific Metas
  ================================================== -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />

	<!-- CSS
  ================================================== -->
	<link rel="stylesheet" href="css/base.css" />
	<link rel="stylesheet" href="css/skeleton.css" />
	<link rel="stylesheet" href="css/screen.css" />
    <link rel="stylesheet" href="css/mediaelementplayer.css" />
    <!--[if IE 7]><link rel="stylesheet" href="css/ie8.css"><![endif]-->
    <!--[if IE 8]><link rel="stylesheet" href="css/ie8.css"><![endif]-->

	<!-- Favicons
	================================================== -->
	<link rel="shortcut icon" href="images/favicon.ico" />
	<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
	<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
	<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
    
    <!-- Fonts
	================================================== -->
    <link href='http//fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic,300,300italic' rel='stylesheet' type='text/css' />
    
    <!-- Scripts
	================================================== -->
    <script src="js/jquery-1.7.min.js" type="text/javascript"></script>
    <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
    <script src="js/jquery.animate-colors-min.js" type="text/javascript"></script>
    <script src="js/ddsmoothmenu.js" type="text/javascript"></script>
    <script src="js/jquery.cssAnimate.mini.js" type="text/javascript"></script>
    <script src="js/jquery.fitvids.js" type="text/javascript"></script>
    <script src="js/jquery.flexslider-min.js" type="text/javascript"></script>
	<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
    <script src="js/mediaelement-and-player.min.js"></script>
    <script src="js/screen.js" type="text/javascript"></script>
    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

<body>

	<!-- Site Backgrounds
	================================================== -->
	
    <!-- Change to class="poswrapheaderline wide" and class="headerline full" for a full-width header line -->
	<div class="poswrapheaderline wide"><div class="headerline full"></div></div>  
    <!-- Remove or uncomment depending on if you want a background image or tile -->
    <!--div class="tiledbackground"></div-->
    <img src="images/backgrounds/bg8.jpg" alt="" id="background" />
    <!-- Remove the bgoverlay div if you don't want the dark pattern overlay above the image -->
    <div class="bgoverlay"></div>
    <!-- Change to class="poswrapper wide" and class="whitebackground full" for a full-width site background -->
    <div class="poswrapper"><div class="whitebackground"></div></div>

	<div class="container main portfolio4column">
    	
        <!-- Header | Logo, Menu
		================================================== -->
	
		<div class="sixteen columns header">
        
			<a href="index.html" class="logohover"><div class="logo"></div></a>
            <div class="mainmenu">
                <div id="mainmenu" class="ddsmoothmenu">
                    <ul>
                        <li><a href="#">Home</a>
                            <ul>  
                                <li><a href="index.html">Home Layout</a></li>
                                <li><a href="index_alternative.html">Portfolio Layout Example</a></li>
                                <li><a href="index_noslider.html">Video Layout</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Features</a>
                            <ul> 
                            	<li><a href="page_shortcodes.html">Shortcodes</a></li>
                                <li><a href="page_clients.html">Clients</a></li>
                                <li><a href="page_full.html">Typography Full Page</a></li>
                                <li><a href="page_sidebar_left.html">Sidebar Left Page</a></li>
                                <li><a href="page_sidebar_right.html">Sidebar Right Page</a></li>
                                <li><a href="#">Another Menu Level</a>
                                    <ul>  
                                        <li><a href="#">Menu Entry One</a></li>
                                        <li><a href="#">Menu Entry Two</a></li>
                                        <li><a href="#">Menu Entry Three</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Portfolio</a>
                            <ul>  
                                <li><a href="portfolio_4column.html">Portfolio Four Columns</a></li>
                                <li><a href="portfolio_1column_full.html">Portfolio One Column</a></li>
                                <li><a href="portfolio_single.html">Project Detail Page</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Blog</a>
                            <ul>  
                                <li><a href="blog_overview.html">Blog Overview</a></li>
                                <li><a href="blog_single.html">Single Blog Post</a></li>
                                <li><a href="blog_overview_full.html">Blog Overview Full</a></li>
                                <li><a href="blog_single_full.html">Single Blog Post Full</a></li>
                            </ul>
                        </li>	
                        <li><a href="contact.html">Contact</a></li>	
                    </ul>
                    <br style="clear: left" />
                </div>
                
                <!-- Responsive Menu -->
                
				<form id="responsive-menu" action="#" method="post" />
                    <select>
                        <option value="" />Navigation
                    </select>
				</form>
				
            </div>
		</div>
    
        <!-- Page Title And Social
		================================================== -->
        
		<div class="pagetitle">
        	<div class="pagetitleholder"><h1>Welcome to the blog<br />stay <span style="color:#ffd200;">informed</span>.</h1></div>
            <div class="socialholder">
            	<ul class="socialicons">
                	<li><a href="#" class="social_facebook"></a><div>Facebook</div></li>
                    <li><a href="#" class="social_twitter"></a><div>Twitter</div></li>
                    <li><a href="#" class="social_googleplus"></a><div>GooglePlus</div></li>
                    <li><a href="#" class="social_pinterest"></a><div>Pinterest</div></li>
                    <li><a href="#" class="social_vimeo"></a><div>Vimeo</div></li>
                    <li><a href="#" class="social_youtube"></a><div>Youtube</div></li>
                    <li><a href="#" class="social_flickr"></a><div>Flickr</div></li>
                    <li><a href="#" class="social_rss"></a><div>RSS Feed</div></li>
                </ul>
			</div>
            <!--div class="headersearch">
                <form class="searchform" method="get" action="#">
                <input name="s" id="s" type="text" onFocus="if(this.value == 'Enter Search here...') { this.value = ''; }" onBlur="if(this.value == '') { this.value = 'Enter Search here...'; }" value="Enter Search here..." />
                </form>
            </div-->
        </div>
        
        <!-- Line Divider
		================================================== -->
        
        <div class="sixteen columns linedivider" style="margin-top: 0;"></div>
        
        <!-- Content Holder -->
		<div class="eleven columns row textblock left">
        	
            <!-- Blogpost -->
            <div class="blogpost row">
                <div class="blogdate">
                    <div class="month">Feb</div>
                    <div class="day">26</div>
                    <div class="year">2012</div>
                </div>
                <div class="postholder">
                    <div class="blogtitle"><h2><a href="#">Blogpost With Image</a></h2></div>
                    <div class="postinfo">
                    	<span class="dateinfo">9 Feb 2012 &nbsp; | &nbsp; </span>in <a href="#">Company News</a>, <a href="#">Presentations</a> &nbsp; | &nbsp; by Admin &nbsp; | &nbsp; <a href="#">3 Comments</a>
                    </div>
                	<div class="blogimage">
                    	<div class="bloginnershadow"></div>
                        <a href="#" data-text="" class="hovering"><img src="images/blog/blogpost1.jpg" alt="" class="scale-with-grid" /></a>
                    </div>  
                    <div class="postbody">
                        <div class="postcontent">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.<br /><br /><a href="#" class="button">Read More <span class="buttonarrow"></span></a></div>
                    </div>
                </div>
                <div class="eleven columns blogdivider alpha"></div>
                <div class="clear"></div>
            </div> 
            
            <!-- Blogpost -->
            <div class="blogpost row">
                <div class="blogdate">
                    <div class="month">Feb</div>
                    <div class="day">17</div>
                    <div class="year">2012</div>
                </div>
                <div class="postholder">
                	<div class="blogtitle"><h2><a href="#">Blogpost Slideshow</a></h2></div>
                    <div class="postinfo">
                        <span class="dateinfo">9 Feb 2012 &nbsp; | &nbsp; </span>in <a href="#">Company News</a>, <a href="#">Presentations</a> &nbsp; | &nbsp; by Admin &nbsp; | &nbsp; <a href="#">3 Comments</a>
                    </div>
                    <div class="blogimage">
                    	<div class="bloginnershadow"></div>
                        <div class="flexslider postslider clearfix">
                            <ul class="slides">
                                <li><img src="images/blog/blogpost_slide1.jpg" alt="" /></li>
                                <li><img src="images/blog/blogpost_slide2.jpg" alt="" /></li>
                                <li><img src="images/blog/blogpost_slide3.jpg" alt="" /></li>
                            </ul>
                        </div>
                    </div>
                    <div class="postbody">
                        <div class="postcontent">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.<br /><br /><a href="#" class="button">Read More <span class="buttonarrow"></span></a></div>
                    </div>
                </div>
                <div class="eleven columns blogdivider alpha"></div>
                <div class="clear"></div>
            </div> 
            
            <!-- Blogpost -->
            <div class="blogpost row">
                <div class="blogdate">
                    <div class="month">Feb</div>
                    <div class="day">17</div>
                    <div class="year">2012</div>
                </div>
                <div class="postholder">
                	<div class="blogtitle"><h2><a href="#">Blogpost Vimeo Video</a></h2></div>
                    <div class="postinfo">
                        <span class="dateinfo">9 Feb 2012 &nbsp; | &nbsp; </span>in <a href="#">Company News</a>, <a href="#">Presentations</a> &nbsp; | &nbsp; by Admin &nbsp; | &nbsp; <a href="#">3 Comments</a>
                    </div>
                	<div class="blogimage">
                    	<div class="bloginnershadow"></div>
                        <div class="scalevid">
                            <iframe src="http//player.vimeo.com/video/38240094?title=0&amp;byline=0&amp;portrait=0" width="640" height="360"></iframe>
                        </div>
                    </div>
                    <div class="postbody">
                        <div class="postcontent">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.<br /><br /><a href="#" class="button">Read More <span class="buttonarrow"></span></a></div>
                    </div>
                </div>
                <div class="eleven columns blogdivider alpha"></div>
                <div class="clear"></div>
            </div>
            
            <!-- Blogpost -->
            <div class="blogpost row">
                <div class="blogdate">
                    <div class="month">Feb</div>
                    <div class="day">17</div>
                    <div class="year">2012</div>
                </div>
                <div class="postholder">
                	<div class="blogtitle"><h2><a href="#">Blogpost Youtube Video</a></h2></div>
                    <div class="postinfo">
                        <span class="dateinfo">9 Feb 2012 &nbsp; | &nbsp; </span>in <a href="#">Company News</a>, <a href="#">Presentations</a> &nbsp; | &nbsp; by Admin &nbsp; | &nbsp; <a href="#">3 Comments</a>
                    </div>
                    <div class="blogimage">
                    	<div class="bloginnershadow"></div>
                        <div class="scalevid">
                            <iframe src="http//www.youtube.com/embed/ziilwlROv1c?hd=1&amp;wmode=opaque&amp;controls=1&amp;showinfo=0" width="640" height="360"></iframe>
                        </div>
                    </div>
                    <div class="postbody">
                        <div class="postcontent">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.<br /><br /><a href="#" class="button">Read More <span class="buttonarrow"></span></a></div>
                    </div>
                </div>
                <div class="eleven columns blogdivider alpha"></div>
                <div class="clear"></div>
            </div>
            
            <!-- Blogpost -->
            <div class="blogpost row">
                <div class="blogdate">
                    <div class="month">Feb</div>
                    <div class="day">17</div>
                    <div class="year">2012</div>
                </div>
                <div class="postholder">
                	<div class="blogtitle"><h2><a href="#">Blogpost With Audio</a></h2></div>
                    <div class="postinfo">
                        <span class="dateinfo">9 Feb 2012 &nbsp; | &nbsp; </span>in <a href="#">Company News</a>, <a href="#">Presentations</a> &nbsp; | &nbsp; by Admin &nbsp; | &nbsp; <a href="#">3 Comments</a>
                    </div>
                    <div class="blogimage"><div class="bloginnershadow"></div>
                        <div class="mediaitem"><audio width="100%" src="media/demosong.mp3" type="audio/mp3" controls="controls"></audio></div>
                    </div>
                    <div class="postbody">
                        <div class="postcontent">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.<br /><br /><a href="#" class="button">Read More <span class="buttonarrow"></span></a></div>
                    </div>
                </div>
                <div class="eleven columns blogdivider alpha"></div>
                <div class="clear"></div>
            </div>

            <!-- Pagination -->
                    
            <div class="blogpages">
                <ul>
                    <li><a href="#" class="selected">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                </ul>
                <div class="clear"></div>
            </div>
            
            <div class="clear"></div>
		</div>
        
       <!-- Sidebar
        ================================================== -->

        <div class="four columns sidebar offset-by-one textblocksidebar">
        
        	<div class="widget">
                <h5>Latest Projects</h5>
                <div class="widget_portfolio">
                    <ul>
                        <li class="clearfix"><div class="projectinnershadow"></div><a href="#" class="smallhover"><img src="images/thumbs/pop_folio1.jpg" alt="" /></a></li>
                        <li class="clearfix"><div class="projectinnershadow"></div><a href="#" class="smallhover"><img src="images/thumbs/pop_folio2.jpg" alt="" /></a></li>
                        <li class="clearfix"><div class="projectinnershadow"></div><a href="#" class="smallhover"><img src="images/thumbs/pop_folio3.jpg" alt="" /></a></li>
                        <li class="clearfix"><div class="projectinnershadow"></div><a href="#" class="smallhover"><img src="images/thumbs/pop_folio4.jpg" alt="" /></a></li>
                        <li class="clearfix"><div class="projectinnershadow"></div><a href="#" class="smallhover"><img src="images/thumbs/pop_folio5.jpg" alt="" /></a></li>
                        <li class="clearfix"><div class="projectinnershadow"></div><a href="#" class="smallhover"><img src="images/thumbs/pop_folio6.jpg" alt="" /></a></li>
                        <li class="clearfix"><div class="projectinnershadow"></div><a href="#" class="smallhover"><img src="images/thumbs/pop_folio7.jpg" alt="" /></a></li>
                        <li class="clearfix"><div class="projectinnershadow"></div><a href="#" class="smallhover"><img src="images/thumbs/pop_folio8.jpg" alt="" /></a></li>
                    </ul>
                    <div class="clear"></div>
                </div>
            </div>
            
            <div class="widget">
                <h5>Contact Info</h5>
                <div class="widget_text">
                    <strong>Company Location</strong><br />
                    Crunchy Studios<br />
                    Mainstreet 123<br />
                    50600, Cologne, Germany<br /><br />
                    
                    <strong>How To Contact Us</strong><br />
                    Email: <a href="mailto:your@email.com">info@yourdomain.com</a><br />
                    Phone: 800.123.4567<br /><br />
                    
                    <strong>Office Hours</strong><br />
                    Mondays-Friday: 09:00 - 18:00<br />
                    Saturday: 10:00 - 15:00
                </div>
            </div>
            
            <div class="widget">
                <h5>Popular Posts</h5>
                <div class="widget_blogposts">
                    <ul>
                        <li class="clearfix">
                            <div class="postinnershadow"></div>
                            <a href="#" class="smallhover"><img src="images/thumbs/pop_blog1.jpg" alt="" /></a>
                            <div class="postlink"><a href="#">Pretty Widgets</a></div>
                            <div class="subline">January 23, 2012</div>
                        </li>
                        <li class="clearfix">
                            <div class="postinnershadow"></div>
                            <a href="#" class="smallhover"><img src="images/thumbs/pop_blog2.jpg" alt="" /></a>
                            <div class="postlink"><a href="#">Convenient Structure</a></div>
                            <div class="subline">January 21, 2012</div>
                        </li>
                        <li class="clearfix">
                            <div class="postinnershadow"></div>
                            <a href="#" class="smallhover"><img src="images/thumbs/pop_blog3.jpg" alt="" /></a>
                            <div class="postlink"><a href="#">Another Blog Post</a></div>
                            <div class="subline">January 17, 2012</div>
                        </li>
                        <li class="clearfix">
                            <div class="postinnershadow"></div>
                            <a href="#" class="smallhover"><img src="images/thumbs/pop_blog4.jpg" alt="" /></a>
                            <div class="postlink"><a href="#">Responsive Layout</a></div>
                            <div class="subline">January 3, 2012</div>
                        </li>
                    </ul>
                    <div class="clear"></div>
                </div>
            </div>
            
            <div class="widget">
                <h5>Tag Cloud</h5>
                <div class="tagcloud">
                    <a href="#">SEO</a><a href="#">News</a><a href="#">Company</a><a href="#">Presentation</a><a href="#">Design</a><a href="#">Web</a><a href="#">Clean</a><a href="#">Portfolio</a>
                    <div class="clear"></div>
                </div>
            </div><div class="clear"></div>
            
            <div class="clear"></div>
    
        </div>
        
        <!-- Space Adjuster
        ================================================== -->
        
        <div class="sixteen columns bottomadjust"></div>
   
	</div><!-- container -->

	<!-- Footer
	================================================== -->
	
    <!-- Change to class="container footerwrap full" for a full-width footer -->
	<div class="container footerwrap full">
    
        <div class="footer">
        	<div class="sixteen columns">

				<div class="four columns widget alpha">
                    <div>
                        <img src="images/logo_bw.png" alt="" class="scale-with-grid" /><br />
Responsive Creative Template
<div class="threedot"></div>
<h3 style="margin-top: -7px;">Love our site?<br /><span class="themecolor">Spread the word!</span></h3>
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fthemeforest.net/item/crunchy-responsive-creative-wordpress-theme/2659062&amp;send=false&amp;layout=button_count&amp;width=171&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=25" style="border:none; overflow:hidden; width:100%; height:25px;"></iframe>
<iframe src="http//platform.twitter.com/widgets/tweet_button.html?url=http//themeforest.net/item/crunchy-responsive-creative-wordpress-theme/2659062&amp;text=Crunchy%20Responsive%20Creative%20WordPress%20Theme&amp;lang=de&amp;count=horizontal&amp;via=damojo82&amp;related=envato" style="width:171px; height:20px;"></iframe>
                    </div>
                </div>
                
                
                
                <div class="four columns clearfix widget">
                   <h5>Twitter</h5>
                    <div class="widget_tweets">
                        <ul></ul>
                        <div class="clear"></div>
                    </div>
                </div>
                
                
                
                <div class="four columns widget">
                    <h5>Quick Contact</h5>
                    <div class="widget_quickcontact">
                        <form id="quickcontact" method="post" action="#" />
                        <input type="text" name="name" id="quickcontact_name" class="requiredfield" onfocus="if(this.value == 'Name *') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Name *'; }" value='Name *' />
                        <input type="text" name="email" id="quickcontact_email" class="requiredfield" onfocus="if(this.value == 'Email *') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Email *'; }" value='Email *' />
                        <textarea name="message" id="quickcontact_message" class="requiredfield" onfocus="if(this.value == 'Message *') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Message *'; }">Message *</textarea>
                        <button type="submit" name="send">Send <span class="buttonarrow"></span></button>
                        <span class="errormessage">Error! Please correct marked fields.</span>
                        <span class="successmessage">Message send successfully!</span>
                        <span class="sendingmessage">Sending...</span>      
                        </form>
                    </div>
                </div>
                

                          
                <div class="four columns widget omega">
                    <h5>Contact Info</h5>
                    <div class="widget_text">
                        <strong>Company Location</strong><br />
                        Crunchy Studios<br />
                        Mainstreet 123<br />
                        50600, Cologne, Germany<br /><br />
                        
                        <strong>How To Contact Us</strong><br />
                        Email: <a href="mailto:your@email.com">info@yourdomain.com</a><br />
                        Phone: 800.123.4567<br /><br />
                        
                        <strong>Office Hours</strong><br />
                        Mondays-Friday: 09:00 - 18:00<br />
                        Saturday: 10:00 - 15:00
                    </div>
                </div>
                
            </div>
        </div>
	</div><!-- container -->
    
    <!-- Sub-Footer
	================================================== -->
    
    <!-- Change to class="container subfooterwrap full" for a full-width subfooter -->
    <div class="container subfooterwrap full">
    
    	<div class="subfooter">
        	<div class="eight columns siteinfo">&copy; Copyright &copy; 2013.Company name All rights reserved.<a target="_blank" href="http//shop109193845.taobao.com" title="即刻工作室">即刻工作室</a> Collect from <a href="http//shop109193845.taobao.com" title="即刻工作室" target="_blank">即刻工作室</a></div>
            <div class="eight columns sitenav">
                <a href="#">Home</a>&nbsp; &nbsp; &nbsp;
                <a href="#">Features</a>&nbsp; &nbsp; &nbsp;
                <a href="#">Portfolio</a>&nbsp; &nbsp; &nbsp;
                <a href="#">Blog</a>&nbsp; &nbsp; &nbsp;
                <a href="#">Contact</a>
            </div>
        </div>
    </div>
    
    <div class="backtotop"><div class="btxt">Back to Top</div></div>

<!-- End Document
================================================== -->

</body>
</html>